<template>
	<view class="tui-userinfo-box">
		<tui-list-cell padding="0"  >
			<view class="tui-list-cell">
				<view>头像</view>
				<image :src="userInfo.icon" class="tui-avatar"></image>
			</view>
		</tui-list-cell>
		<tui-list-cell padding="0" >
			<view class="tui-list-cell">
				<view>昵称</view>
				<view class="tui-content">{{userInfo.nickname}}</view>
			</view>
		</tui-list-cell>
		<tui-list-cell padding="0" >
			<view class="tui-list-cell">
				<view>账号</view>
				<view class="tui-content">{{userInfo.username}}</view>
			</view>
		</tui-list-cell>
		<tui-list-cell padding="0" >
			<view class="tui-list-cell">
				<view>手机号</view>
				<view class="tui-content">{{userInfo.phone}}</view>
			</view>
		</tui-list-cell>
		<tui-list-cell padding="0">
			<view class="tui-list-cell">
				<view>性别</view>
				<view class="tui-content">{{userInfo.gender==1?'男':'女'}}</view>
			</view>
		</tui-list-cell>
		
		<view class="tui-exit">
			<tui-button shape="circle" shadow type="danger" height="88rpx" @click="logut">退出登录</tui-button>
		</view>
		<tui-toast ref="toast"></tui-toast>
		<u-no-network tips="哎呀，网络信号丢失"></u-no-network>
		
	</view>
</template>

<script>
	import UmsMemberController from '../../api/UmsMemberController.js'
	export default {
		data() {
			return {
				userInfo:{}
			}
		},
		async onShow() {
			await UmsMemberController.info().then(res=>{
				this.userInfo=res.data.data
			}).catch(err=>{
				console.log(err)
			})
		},
		methods: {
			logut(){
				uni.clearStorageSync()
				this.$refs.toast.show({
					title: "成功退出",
					imgUrl: "/static/img/toast/check-circle.png",
					icon: false
				})
				setTimeout(()=>{
					uni.navigateBack()
				},2000)
			}
		}
	}
</script>

<style scoped>
	.tui-userinfo-box {
		margin: 20rpx 0;
		color: #333;
	}

	.tui-list-cell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 60rpx 24rpx 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
	}

	.tui-pr30 {
		padding-right: 30rpx;
	}

	.tui-avatar {
		width: 100rpx;
		height: 100rpx;
		display: block;
	}

	.tui-content {
		font-size: 26rpx;
		color: #666;
	}
	.tui-exit{
		padding: 20rpx;
		margin-top: 100rpx;
	}
</style>
